import Konva from "konva"
import { componentsShapeType } from './consts'
export class KonvaJs {
    id
    SCALE_BY
    stage
    layer
    tr
    group
    text
    // 构造函数
    constructor(id) {
        // 将传入的id赋值给实例的id属性
        this.id = id;
        this.SCALE_BY = 1.1;
        this.stage = null
        this.layer = this.newLayer()
        this.tr = this.newTransformer()
        this.text = this.newText()
        this.group = this.newGroup({ x: 0, y: 0 })
        this.init()
    }
    // 初始化函数
    init() {
        // 获取id为this.id的元素
        const el = document.getElementById(this.id)
        // 如果元素不存在，则返回
        if (!el) {
            return
        }
        // 获取元素的宽度和高度
        const { clientWidth, clientHeight } = el

        // 创建一个新的舞台，设置容器为this.id，宽度为clientWidth，高度为clientHeight，可拖拽
        this.stage = this.newStage({
            // dom元素
            container: this.id,
            width: clientWidth,
            height: clientHeight,
            draggable: false,
            type: componentsShapeType.CANVAS,
        })
        // 创建一个新的图层
        this.layer.add(this.group)
        // 将this.tr添加到this.layer中
        this.layer.add(this.tr)
        // 将this.layer添加到this.stage中
        this.stage.add(this.layer)
        // 绘制棋盘
        this.drawBoard()
        //缩放
        // this.addListenerStageEvents()
    }
    // 绘制棋盘
    drawBoard() {
        // 如果没有舞台，则返回
        if (!this.stage) return
        // 定义棋盘的宽度和高度
        const width = 700;
        const height = 700;
        // 计算棋盘的x和y坐标
        const x = this.stage.width() / 2 - width / 2
        const y = this.stage.height() / 2 - height / 2
        // 创建棋盘
        const board = this.newRect({
            title: '画板',
            id: this.getUUID(),
            name: 'board',
            x: x,
            y: y,
            width: width,
            height: height,
            fill: '#ffffff',
            type: componentsShapeType.BOARD,
            stroke: '#ffffff',
            strokeWidth: 1,
            create: true,
            scaleX: 1,
            scaleY: 1,
            opacity: 1,
        })
        // 将棋盘添加到图层中
        this.group.add(board)
    }

    // 监听窗口大小变化
    onresize() {
        // 获取当前元素的id
        const el = document.getElementById(this.id)
        // 如果没有获取到元素，则返回
        if (!el) return
        // 获取当前元素的宽度和高度
        const { clientWidth, clientHeight } = el
        // 设置舞台的宽度和高度
        this.stage.setAttrs({
            width: clientWidth,
            height: clientHeight,
        })

    }

    // addListenerStageEvents() {
    //     if (!this.stage) return
    //     this.stage.on('wheel', (e) => {
    //         if (!this.stage) return
    //         const oldScale = this.stage.scaleX()
    //         const pointer = this.stage.getPointerPosition()
    //         const mousePointTo = {
    //             x: (pointer.x - this.stage.x()) / oldScale,
    //             y: (pointer.y - this.stage.y()) / oldScale,
    //         }
    //         let directtion = e.evt.deltaY > 0 ? -1 : 1
    //         if (e.evt.ctrlKey) {
    //             directtion = -directtion
    //         }
    //         const newScale = directtion > 0 ? oldScale * this.SCALE_BY : oldScale / this.SCALE_BY
    //         this.stage.scale({ x: newScale, y: newScale })
    //         const newPos = {
    //             x: pointer.x - mousePointTo.x * newScale,
    //             y: pointer.y - mousePointTo.y * newScale,
    //         }
    //         this.stage.position(newPos)
    //     })
    // }

    // 绘制图形
    drawShapes(type, position,test) {
        console.log(type, position,test);

        if (!this.stage) return
        // 定义图形变量
        let shapes;
        // 生成唯一标识
        const id = this.getUUID()
        // 判断图形类型
        if (type === componentsShapeType.RECT) {
            const rectShapes = this.stage.find('.rect')
            // 创建矩形
            shapes = this.newRect({
                id: id,
                title: `矩形${rectShapes.length + 1}`,
                name: 'rect',
                width: 200,
                height: 100,
                fill: '#fff',
                stroke: 'blck',
                strokeWidth: 1,
                type: type,
                draggable: true,
                create: true,
                scaleX: 1,
                scaleY: 1,
                opacity: 1,
            })
        } else if (type === componentsShapeType.TEXT) {
            // 创建文本
            shapes = this.newText({
                id: id,
                title: `双击编辑标题`,
                name: 'text',
                text: '双击编辑标题',
                fontSize: 20,
                draggable: true,
                create: true,
                type: type,
            })
            // 添加文字类型需立即添加手柄
            this.tr.nodes([shapes])
        } else if (type === componentsShapeType.IMAGE) {
            // 创建图片
            shapes = this.newImage({
                id: id,
                title: `图片`,
                name: 'image',
                
                draggable: true,
                create: true,
                type: type,
                width: 200,
                height: 100,
                opacity: 1,
                scaleX: 1,
                scaleY: 1,
                ...test // 合并传入的配置
            })
        }
        // 如果图形不存在，则返回
        if (!shapes) return
        shapes.position(position)
        this.group.add(shapes)
        // 将图形添加到图层
        return shapes
    }

    // 获取UUID
    getUUID() {
        // 获取当前时间
        let d = Date.now()
        // 如果浏览器支持performance.now()方法，则将当前时间加上performance.now()的返回值
        if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
            d += performance.now()
        }
        // 返回一个UUID
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            // 生成一个随机数
            const r = (d + Math.random() * 16) % 16 | 0
            // 将当前时间除以16
            d = Math.floor(d / 16)
            // 如果c为x，则返回r，否则返回r与0x3按位与的结果与0x8按位或的结果
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
        })
    }

    // 创建一个新的Konva.Stage对象
    newStage(data) {
        // 返回一个新的Konva.Stage对象
        return new Konva.Stage(data)
    }
    newLayer(data) {
        return new Konva.Layer(data)
    }
    newTransformer(data) {
        return new Konva.Transformer(data)
    }
    newGroup(data) {
        return new Konva.Group(data)
    }
    newRect(data) {
        return new Konva.Rect(data)
    }
    newCircle(data) {
        return new Konva.Circle(data)
    }
    newText(data) {
        return new Konva.Text(data)
    }
    newImage(data) {
        console.log(data);
        
        return new Konva.Image(data)
    }
    newRegularPolygon(data) {
        return new Konva.RegularPolygon(data)
    }
    newLine(data) {
        return new Konva.Line(data)
    }
    newLabel(data) {
        return new Konva.Label(data)
    }
    newTag(data) {
        return new Konva.Tag(data)
    }
    newArrows(data) {
        return new Konva.Arrow(data)
    }
    newPath(data) {
        return new Konva.Path(data)
    }
}